<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>notebook</title>
    <style>
        #box{
            width: 302px;
            margin: 0 auto;
            padding: 0;
            border-bottom: none;
        }

        #text{
            border: 1px solid black;
            padding: 0;
            width: 300px;
            height: 40px;
            font-size: 32px;
            display: block;
        }

        ul,li{
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        ul{
            width: 300px;
            border: 1px solid black;
            border-top: none;
            border-bottom: none;
        }

        li{
            height: 22px;
            border-bottom: 1px solid black;
            position: static;
        }

        .butt{
            clear: right;
            float: right;
        }

        #hidden{
            clear: both;
            float: left;
        }

        li.hidden{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="box">
            <input type="text" v-model="value" @keyup.enter="addNotes" id="text">
            <ul>
                <li :class="{'hidden': isHidden}" v-for="(item, index) in notes" @mouseenter="mouseOver(index)" @mouseleave="mouseLeave(index)">
                    {{ item }}
                    <button class="butt" v-show="isShow[index]" @click="deleteNotes(index)">
                        del
                    </button>
                </li>
                <!-- <button class="butt" v-for="(item, index) in notes" @click="deleteNotes(index)">
                    del
                </button> -->
            </ul>
            <button id="hidden" @click="hidden">
                {{ isHidden?"show":"hidden"}}
            </button>
            <button class="butt" @click="clear">
                clear
            </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                isShow: [],
                notes:[],
                value: "",
                isS: false,
                isHidden: false,
            },
            methods:{
                addNotes: function(){
                    this.notes.push(this.value);
                    this.value = "";
                    this.isShow.push(false);
                },

                deleteNotes: function(index){
                    this.notes.splice(index, 1);
                },

                mouseOver: function(index){
                    this.$set(this.isShow, index, true);
                    this.isS = true;
                },

                mouseLeave: function(index){
                    this.$set(this.isShow, index, false);
                },

                print: function(value){
                },

                clear: function(){
                    while(this.notes.length > 0)
                        this.notes.pop();
                },

                hidden: function(){
                    this.isHidden = !this.isHidden;
                },
            }
        })
    </script>
</body>
</html>